<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>每日一篇</title>
		<style>
			*{
				padding:0;margin:0;list-style: none;text-decoration: none;
				color:white
			}
			a {color:white}
			
			html,body{width:100%;height: 100%;}
			
			.content {
				text-indent:2em;
				
				color:deepskyblue;
				/* text-align: center; */
				margin:0 auto;
			}
			.henshin {
				font-size: 16px;color:deepskyblue;skybackground-color: white;
				width:140px;
				height:46px;line-height: 46px;
				border-radius: 8px;
				border:none;
				box-sizing: border-box;
				position:relative;
				transform: translate(-50%,-50%);
				left:50%;
				margin: 30px auto;
				outline: none;
				box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
				transition:0.3s;
			}
			.henshin:hover{
				height:56px;line-height: 56px;
				width:160px;
			}
			.main{
				width:100%;height:800px;
				background-image: linear-gradient(#e66465, #9198e5);
				padding-top: 100px;
				/* filter: blur(30px); */
			}
			
			
			
			
			@media screen and (min-width:770px) {
				.header {
					background: url(../image/44036.jfif) no-repeat;
					background-size: 100% 100%;
					width:100%;height:100%;
					
					box-sizing: border-box;
					padding-top: 180px;
				}
				.nav {
					width:100%;height:40px;padding:8px;
				}
				.nav ul .ii {display:none;}
				.nav ul {
					margin:0 auto 80px;
					width:770px;
					position:relative;z-index: 33;color:white;
					display:flex;justify-content: center;
					
				}
				.content p {
					margin-bottom:20px;
				}
				.nav ul li {
					flex:1;height:30px;line-height: 30px;
					width:60px;box-sizing: border-box;
					margin:0 10px 10px 0;
					text-align: center;
				}
				.nav ul li:hover {
					background-color: white;
					border-radius: 12px;
				}
				.nav ul li a:hover {
					color:skyblue
				}
				.nav ul .current {
					border: 1px solid white;
					border-radius: 12px;
					background-color: white;
				}
					.nav ul .current a {
						color:deepskyblue;
					}			
				
			}
			
			
			@media screen and (max-width:770px) {
				.header {
					background: url(../image/44036.jfif) no-repeat;
					background-position:top left;
					background-size: 140% 140%;
					/* background-size: 100% 100%; */
					width:100%;height:100%;
					padding-top:180px;
					box-sizing: border-box;
				}
				.content {
					font-size: 50%;
				}
				/* .nav ul {display:flex;} */
				.ii {width:30px;height:30px;display: inline;position:relative;top:5px;
				
				}
				.nav {
					width:100%;background-color: deepskyblue;height:40px;margin-bottom: 80px;
					line-height: 40px;
				}
				.nav ul li {display:none;}
				.nav ul .current {
					display:inline;height:40px;margin:0 auto;width:100px;
				}
				.nav_active {
					position:relative;z-index: 99;
					width:100%;background-color: royalblue;height:200px;
					line-height: 40px;
					overflow: hidden;
				}
				
			}
			/* 
			此时的效果为点击标签会跳转也页面;
			在不使用框架,又不让地址发生跳转;并且页面部分内容发生改变,利用选项卡的操作 
			*/
		</style>
	</head>
	<body>
		<div class="header">
			<nav class="nav" style="transition:1s;position: fixed;top:0;">
			    <ul class="list"> 
					<img src="../image/nav.png" alt="dao" class="ii">
			        <li ><a href="../index.html">每日诗词</a></li>
			        <li ><a href="./heisei.html">百人一首</a></li>
			        <li ><a href="./du.html">毒鸡汤</a></li>
			        <li class="current"><a href="javascript:;">每日一篇</a></li>
			        <!-- <li><a href="javascript:;">Graphic Desig</a></li> -->
			    </ul>
			</nav>
			<div class="content" style="width:70%;">
				<p style="color:deepskyblue">
					Danae Mercer is an Instagram influencer herself, but one with a different mission.
				</p>
				<p style="color:deepskyblue"> 
					Mercer's Instagram feed is full of before and after photos of herself showing what it looks like when someone poses for an Instagram-worthy photo, versus what they look like in reality.
				</p>
				<p style="color:deepskyblue">
					In most cases, the two photos are taken just minutes apart.
				</p>
				"For an Instagram pose, I will pose, usually arch my shoulders, squeeze my core, your butt goes back crazy far because in 99% of poses that's more flattering. It elongates the core and makes the legs look leaner," Mercer, 33, told "Good Morning America." "If I was shooting in the sun I would shoot sunrise or sunset or in shadow, which is way more flattering for cellulite."
			</div>
				
				
		</div>
		
	<script type="text/javascript">	
		let ii =document.getElementsByClassName('ii');
		// let xx =document.getElementsByClassName('list');
		let list =document.getElementsByTagName("li");
		let nav =document.getElementsByTagName('nav');
		let flag =false;
		
		ii[0].addEventListener('click',function(){
			if(flag) {
				for(let i=0;i<list.length;i++){
					if(list[i].className =="current") {
						list[i].style.display ="inline"
						continue;
					}
					list[i].style.display="none";
				}
				nav[0].className="nav";
				
				flag=false;
				return;
			}
			nav[0].className="nav_active";
			setTimeout(function(){
				for(let i=0;i<list.length;i++){
					// list[i].className="";
					list[i].style.display="block";
				}
			},100)
			flag =true;
		})
		
		
	
		</script>
	</body>
</html>
